<template>
	<view class="page-add-device">
		<u-navbar title="添加设备" :border-bottom="false" :titleBold="true"></u-navbar>
		<view class="top-line">
		</view>
		<view class="wrap">
			<view class="label">
				设备分类   
			</view>
			<view class="fill-select u-flex u-row-between" @click="catePickShow = true">
				<view class="prompt" :class="catePickRegion?'prompt-active':''">
					{{catePickRegion || '请选择所属分类'}}
				</view>
				<view class="icon">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="line"></view> 
			<view class="label">
				设备服务类型   
			</view>
			<view class="fill-select u-flex u-row-between">
				<u-radio-group v-model="radiovalue1" placement="column">
					<u-radio
						:customStyle="{marginBottom: '8px'}"
						v-for="(item, index) in radiolist1"
						:key="index"
						:label="item.name"
						:name="item.name"
						active-color="#c40200"
					>{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="line"></view>
			<view class="label">
				标题   
			</view>
			<view class="fill-select u-flex u-row-between">
				<view class="prompt u-flex-1">
					<input type="text" v-model="title" placeholder="请输入发布标题" placeholder-style="font-size:28rpx;color:#999"/>
				</view>
			</view>
			<view class="line"></view>
			<view class="label">
				设备区域   
			</view>
			<view class="fill-select u-flex u-row-between" @click="addressPickShow = true">
				<view class="prompt" :class="addressPickRegion?'prompt-active':''">
					{{addressPickRegion || '请选择省份'}}
				</view>
				<view class="icon">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="line"></view>
			<view class="label">
				联系人   
			</view>
			<view class="fill-select u-flex u-row-between">
				<view class="prompt u-flex-1">
					<input type="text" v-model="lxr" value="" placeholder="如：刘媛媛" placeholder-style="font-size:28rpx;color:#999"/>
				</view>
			</view>
			<view class="line"></view>
			<view class="label">
				联系电话   
			</view>
			<view class="fill-select u-flex u-row-between">
				<view class="prompt u-flex-1">
					<input type="tel" v-model="lxdh" value="" placeholder="如：13888888888" placeholder-style="font-size:28rpx;color:#999"/>
				</view>
			</view>
			<view class="line"></view>
			<view class="label">
				品牌名称   
			</view>
			<view class="fill-select u-flex u-row-between">
				<view class="prompt u-flex-1">
					<input type="text" v-model="brandname" value="" placeholder="请输入品牌名称" placeholder-style="font-size:28rpx;color:#999"/>
				</view>
			</view>
			<view class="line"></view>
			<view class="label">
				租售类型   
			</view>
			<view class="fill-select u-flex u-row-between">
				<u-radio-group v-model="radiovalue2" placement="column" >
					<u-radio
						:customStyle="{marginBottom: '8px'}"
						v-for="(item, index) in radiolist2"
						:key="index"
						:label="item.name"
						:name="item.name"
						active-color="#c40200"
					>{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="line"></view>
			<view class="label">
				设备照片	   
			</view>
			<view class="imgs-upload">
				<img-upload @chooseImage = "chooseImage" @delImg="delImg"></img-upload>
			</view>
			<view class="label">
				设备型号	   
			</view>
			<view class="fill-select u-flex u-row-between">
				<view class="prompt u-flex-1">
					<textarea v-model="sbxh" auto-height type="text" value="" placeholder="请输入设备型号或设备参数" placeholder-style="font-size:28rpx;color:#999"/>
				</view>
			</view>
			<view class="line"></view>
			<view class="label">
				设备用途	   
			</view>
			<view class="fill-select u-flex u-row-between">
				<view class="prompt u-flex-1">
					<textarea v-model="sbyt" auto-height type="text" value="" placeholder="请输入设备用途" placeholder-style="font-size:28rpx;color:#999"/>
				</view>
			</view>
			<view class="line"></view>
			<view class="label">
				设备租售说明	   
			</view>
			<view class="fill-select u-flex u-row-between">
				<view class="prompt u-flex-1">
					<textarea v-model="ndesc" auto-height type="text" value="" placeholder="请输入设备租售说明" placeholder-style="font-size:28rpx;color:#999"/>
				</view>
			</view>
			<view class="line"></view>
		</view>
		<u-button type="error" shape="circle" class="custom-style" @click="submit">确认提交</u-button>
		<u-toast ref="uToast" />
		<!-- 设备分类pick -->
		<u-picker v-model="catePickShow" mode="selector" :range="deviceColumnList" range-key="name"
		:default-selector="[0]" @confirm="catePickConfirm"></u-picker>
		<!-- 城市pick -->
		<u-picker mode="region" v-model="addressPickShow" @confirm="regionConfirm"></u-picker>
	</view>
</template>

<script>
	import ImgUpload from "@/components/common/img-upload.vue"
	import { commonGet } from "@/api/commonapi.js"
	export default {
		components:{
			ImgUpload
		},
		data() {
			return {
				catePickShow:false,
				catePickRegion:"",
				catePickRegionIndex:0,
				selector: [1, 2, 3],
				deviceColumnList:[],
				value2:0,
				addressPickShow: false,
				addressPickRegion: "",
				radiolist1: [{
						name: '仅设备服务',
						id:1,
						disabled: false
					},
					{
						name: '设备及人工服务',
						id:2,
						disabled: false
					}
				],
				radiovalue1:'仅设备服务',
				radiolist2: [{
						name: '新机售卖',
						id:0,
						disabled: false
					},
					{
						name: '二手转让',
						id:1,
						disabled: false
					},
					{
						name: '人机租赁',
						id:2,
						disabled: false
					},
					{
						name: '单机租赁',
						id:3,
						disabled: false
					}
				],
				radiovalue2:'新机售卖',
				tphdp1:[],
				title:"",
				lxr:"",
				lxdh:"",
				brandname:"",
				sbxh:"",
				sbyt:"",
				ndesc:"",
				sbqy:""
			}
		},
		watch: {
			radiovalue1(newValue, oldValue) {
				this.radiovalue1 = newValue
			},
			radiovalue2(newValue, oldValue){
				this.radiovalue2 = newValue
			}
		},
		onLoad() {
			this.getDeviceColumnList()
		},
		methods: {
			regionConfirm(e) {
				this.sbqy = e.area.value
				this.addressPickRegion = e.province.label + ' ' + e.city.label +  ' ' + e.area.label
			},
			catePickConfirm(e){
				this.catePickRegionIndex = e[0]
				this.catePickRegion = this.deviceColumnList[e[0]].name
			},
			getDeviceColumnList(){
				let _this = this
				let query = {
					ak:_this.$store.state.token,
					cmd:"nDeviceColumn_list",
					para:JSON.stringify({
						
					})
				}
				commonGet(query,(result)=>{
					result.Data.Data.forEach((item,index)=>{
						item.name = item.name.replace("&nbsp;","")
					})
					_this.deviceColumnList = result.Data.Data
				})
			},
			// 上传图片
			chooseImage(arr){
				this.tphdp1 = arr
			},
			// 删除图片
			delImg(arr){
				this.tphdp1 = arr
			},
			submit(){
				let _this = this
				let reg = /^1[3,5,7,8,9][0-9]{9}$/;
				let regexp = /^[\u4e00-\u9fa5]{1,6}(.[\u4e00-\u9fa5]{1,6}){0,2}$/;
				var sbfw = ""
				var xslx = ""
				_this.radiolist1.filter((item1,index1) => {
					if(item1.name == _this.radiovalue1){
						sbfw = item1.id
					}
				})
				_this.radiolist2.filter((item2,index2) => {
					if(item2.name == _this.radiovalue2){
						xslx = item2.id
					}
				})
				if(_this.catePickRegion == ""){
					this.$refs.uToast.show({title: '请选择所属分类'})
				}else if(_this.title.trim() == ""){
					this.$refs.uToast.show({title: '请输入发布标题'})
				}else if(_this.addressPickRegion == ""){
					this.$refs.uToast.show({title: '请选择设备区域'})
				}else if(_this.lxr.trim() == ""){
					this.$refs.uToast.show({title: '请输入联系人'})
				}else if(!regexp.test(_this.lxr)){
					this.$refs.uToast.show({title: '姓名格式不正确'})
				}else if(_this.lxdh.trim() == ""){
					this.$refs.uToast.show({title: '请输入联系电话'})
				}else if(!reg.test(_this.lxdh)){
					this.$refs.uToast.show({title: '请输入正确的手机号码'})
				}else if(_this.brandname.trim() == ""){
					this.$refs.uToast.show({title: '请输入品牌名称'})
				}else if(_this.tphdp1.length == 0){
					this.$refs.uToast.show({title: '请上传图片'})
				}else if(_this.sbxh.trim() == ""){
					this.$refs.uToast.show({title: '请输入设备型号或设备参数'})
				}else if(_this.sbyt.trim() == ""){
					this.$refs.uToast.show({title: '请输入设备用途'})
				}else if(_this.ndesc.trim() == ""){
					this.$refs.uToast.show({title: '请输入设备租售说明'})
				}else{
					let query = {
						ak:_this.$store.state.token,
						cmd:"nDevice_add",
						para:JSON.stringify({
							pageid:"1776",
							colid:_this.deviceColumnList[_this.catePickRegionIndex].id,
							sbfw:sbfw,
							title:_this.title,
							sbqy:_this.sbqy,
							lxr:_this.lxr,
							lxdh:_this.lxdh,
							brandname:_this.brandname,
							xslx:xslx,
							img:_this.tphdp1[0].lj,
							tphdp1:JSON.stringify(_this.tphdp1),
							sbxh:_this.sbxh,
							sbyt:_this.sbyt,
							ndesc:_this.ndesc
						})
					}
					commonGet(query,(result)=>{
						console.log(result)
						if(result.Message == "操作成功！"){
							this.$refs.uToast.show({
								title: '提交成功',
								type: 'success',
								back: true
							})
						}
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.line{
		width: 100%;
		height: 40rpx;
		border-bottom: 1px solid #e5e5e5;
		margin-bottom: 54rpx;
	}
	.top-line{
		width: 100%;
		height: 20rpx;
		background-color: #f7f7f7;
	}
	.wrap{
		width: 100%;
		padding: 40rpx 30rpx;
		.label{
			font-size: 24rpx;
			margin-bottom: 22rpx;
		}
		.imgs-upload{
			margin-bottom: 54rpx;
		}
		.fill-select{
			.prompt{
				font-size: 28rpx;
				color: #999;
				input{
					width: 100%;
					color: #000;
					font-size: 28rpx;
				}
				textarea{
					width: 100%;
					color: #000;
					font-size: 28rpx;
				}
			}
			.prompt-active{
				color: #000;
			}
		}
	}
	.custom-style{
		color: #fff;
		background-color: #c40200;
		width: 406rpx;
		height: 92rpx;
		border-radius: 92rpx;
		margin: 0rpx auto 100rpx ;
		font-size: 30rpx;
	}
	.u-radio-group{
		flex-wrap: nowrap;
	}
</style>
